<template>
	<view class="content">
    <view class="content-header">
      欣奕华 看板
    </view>

    <view class="content-body" v-for="(item,index) in baseList" :key="index" @click="goToSubpage(item)">
      <view class="cb-first">
        <view class="cb-left">
          <wd-img width="50" height="50" :src="item.icon" />
        <view>{{ item.title }}</view>
        </view>
        <view class="cb-right">
          <wd-icon name="chevron-right" size="22px"></wd-icon>
        </view>
      </view>
    </view>

		<!-- <uv-grid :col="2" @click="click" :border="true">
			<uv-grid-item v-for="(item,index) in baseList" :key="index">
				<uv-icon :customStyle="{paddingTop:30+'rpx'}" :name="item.name" :size="40"></uv-icon>
				<text class="grid-text">{{item.title}}</text>
			</uv-grid-item>
		</uv-grid> -->

	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter'
import tabbar from '@/component/tab-bar/tabbar.vue'
import data from '@/assets/home/data.svg'
import energy from '@/assets/home/energy.svg'
import environment from '@/assets/home/envionment.svg'
import produce from '@/assets/home/produce.svg'
import monitor from '@/assets/home/monitor.svg'
import sale from '@/assets/home/sale.svg'
import whole from '@/assets/home/whole.svg'

// !主页和我的放在主包中，其余所有放在分包中
// 配置分包路由
const subPackageUrl = {
  WHOLE: '/pages_second/whole/whole', // 整体看板
  PRODUCE: '/pages_second/produce/produce', // 生产看板
  SALE: '/pages_second/sale/sale', // 产销存看板
  ENERGY: '/pages_second/energy/energy', // 能源看板
  ENVIRONMENT: '/pages_second/environment/environment', // 环保看板
  DATA: '/pages_second/data/data', // 数据报表
  MONITOR: '/pages_second/monitor/monitor' // 视频监控
}

const baseList = ref([
        {
          key: subPackageUrl.WHOLE,
					name: 'photo',
					title: '整体看板',
          icon: whole,
				},
        {
          key: subPackageUrl.PRODUCE,
					name: 'lock',
					title: '生产看板',
          icon: produce,
				},
        {
          key: subPackageUrl.SALE,
					name: 'star',
					title: '产销存看板',
          icon: sale,
				},
        {
          key: subPackageUrl.ENERGY,
					name: 'star',
					title: '能源看板',
          icon: energy,
				},
        {
          key: subPackageUrl.ENVIRONMENT,
					name: 'star',
					title: '环保看板',
          icon: environment,
				},
        {
          key: subPackageUrl.DATA,
					name: 'star',
					title: '数据报表',
          icon: data,
				},
        {
          key: subPackageUrl.MONITOR,
					name: 'star',
					title: '视频监控',
          icon: monitor,
				},
      ]);

  const goToSubpage = (item: any) => {
     uni.navigateTo({ url: item.key });
  }

</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100%;
  background-color: rgb(247, 246, 250);
  .content-header {
    height: 200upx;
    background-color: #fff;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 900;
  }

  .content-body {
    display: flex;
    align-items: center;
    justify-content: center;
    .cb-first {
      background-color: #fff;
      height: 180upx;
      width: 90%;
      margin-top: 40upx;
      border-radius: 20px;
      display: flex;
      justify-content: space-between;
      .cb-left {
        width: 60%;
        margin-left: 20px;
        display: flex;
        gap:40px;
        align-items: center;
      }
      .cb-right {
        margin-right: 20px;
        line-height: 180upx;
      }
    }
  }
}

	.grid-text {
		font-size: 14px;
		color: #909399;
	}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
